import React, { useState, useEffect } from 'react'
import { Search, Toast, Tag, Space } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { hotSearch, keySearch } from '../../../models';
import { List, InfiniteScroll } from 'antd-mobile'
import { ListItem } from 'antd-mobile/es/components/list/list-item';
import './search.scss'

export default function SearchList() {
    const navigate = useNavigate()
    const [value, setValue] = useState('')
    let [hotList, setHotList] = useState([])
    let [searchList, setSearchList] = useState([])
    let [display, setDisplay] = useState(true)
    let [count, setCount] = useState(1);
    const [hasMore, setHasMore] = useState(true) //是否有更多数据
    useEffect(() => {
        hotSearch().then(res => {
            setHotList(res.data)
        })
    }, [])
    const search = (key) => {
        keySearch(key).then(res => {
            console.log(res);
            if (res.code === '200') {
                setSearchList(res.data)
            } else {
                setSearchList([])
            }

        })
        setDisplay(false)
    }
    async function loadMore() {  //上拉加载
        count++
        setCount(count)
        const append = await keySearch(value, count)  //取下一页面的数据
        console.log(append);
        if (append.data) {
            setSearchList(val => [...val, ...append.data])
            setHasMore(append.data.length > 0)  //有数据才进行加载
        } else {
            console.log(append.message);
            setHasMore(false)
            return
        }
    }
    return (
        <div>
            <div className='search' style={{ display: 'flex', borderBottom: '1px solid #ccc' }}>
                <div onClick={() => navigate(-1)} style={{ fontSize: '24px', width: '5%', backgroundColor: '#fff', lineHeight: '54px', textAlign: 'center' }} >&lt;</div>
                <Search
                    value={value}
                    onChange={setValue}
                    placeholder="请输入搜索关键词"
                    showAction
                    onSearch={(val) => {
                        Toast(val);
                        setValue(val);
                        search(val)
                    }}
                    actionText={<div onClick={() => search()}>搜索</div>}
                    style={{ width: '95%' }}
                />
            </div>
            {display ? (<><div>
                <h2 style={{ backgroundColor: '#fff', paddingTop: '20px' }}>搜索历史</h2>
                <Space align="center" wrap gap={[8, 20]} style={{ width: '100%', margin: '10px', boxSizing: 'border-box' }}>
                    {
                        hotList.map(item => {
                            return (
                                <Tag key={item.wordid} size="large" onClick={() => { setValue(item.keyword); search(item.keyword) }} color="#ffe1e1" textColor="#ad0000">
                                    {item.keyword}
                                </Tag>
                            )
                        })
                    }
                </Space>
            </div>
                <div>
                    <h2 style={{ backgroundColor: '#fff', paddingTop: '20px' }}>热门搜索</h2>
                    <Space align="center" wrap gap={[8, 20]} style={{ width: '100%', margin: '10px', boxSizing: 'border-box' }}>
                        {
                            hotList.map(item => {
                                return (
                                    <Tag onClick={() => { setValue(item.keyword); search(item.keyword) }} key={item.wordid} size="large" color="#ffe1e1" textColor="#ad0000">
                                        {item.keyword}
                                    </Tag>
                                )
                            })
                        }
                    </Space>
                </div></>) : (<>
                    <div className='list'>
                        <List>
                            {
                                searchList.map((item, index) => {
                                    return <ListItem key={index} onClick={() => navigate("/details/" + item.proid)} arrow={false}>
                                        <img src={item.img1} alt='' />
                                        <h6 className='desc'>{item.desc}</h6>
                                        <p className='price'>￥{item.originprice}</p>
                                    </ListItem>
                                })
                            }
                        </List>
                        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                    </div>
                </>)}
        </div>
    )
}
